page-chatdetails {
  $userBackgroundColor: #387ef5;
  $toUserBackgroundColor: #fff;
  ion-content .scroll-content {
    background-color: #f5f5f5;
  }
  ion-footer {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.11);
    background-color: #fff;
    height: 255px;
  }
  .line-breaker {
    white-space: pre-line;
  }
  .input-wrap {
    padding: 0 5px;
    ion-textarea {
      position: static;
    }
    ion-col.col {
      padding: 0;
    }
    button {
      width: 100%;
      height: 55px;
      font-size: 1.3em;
      margin: 0;
    }
    textarea {
      border-bottom: 1px #387ef5;
      border-style: solid;
    }
  }
  .message-wrap {
    padding: 0 10px;
    .message {
      position: relative;
      padding: 7px 0;
      .user-img {
        position: absolute;
        border-radius: 45px;
        width: 45px;
        height: 45px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.36);
      }
      .msg-detail {
        width: 100%;
        display: inline-block;
        p {
          margin: 0;
        }
        .msg-info {
          p {
            font-size: .8em;
            color: #888;
          }
        }
        .msg-content {
          position: relative;
          margin-top: 5px;
          border-radius: 5px;
          padding: 8px;
          border: 1px solid #ddd;
          color: #fff;
          width: auto;
          span.triangle {
            background-color: #fff;
            border-radius: 2px;
            height: 8px;
            width: 8px;
            top: 12px;
            display: block;
            border-style: solid;
            border-color: #ddd;
            border-width: 1px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            position: absolute;
          }
        }
      }
    }
    .message.left {
      .msg-content {
        background-color: $toUserBackgroundColor;
        float: left;
      }
      .msg-detail {
        padding-left: 60px;
      }
      .user-img {
        left: 0;
      }
      .msg-content {
        color: #343434;
        span.triangle {
          border-top-width: 0;
          border-right-width: 0;
          left: -5px;
        }
      }
    }
    .message.right {
      .msg-detail {
        padding-right: 60px;
        .msg-info {
          text-align: right;
        }
      }
      .user-img {
        right: 0;
      }
      ion-spinner {
        position: absolute;
        right: 10px;
        top: 50px;
      }
      .msg-content {
        background-color: $userBackgroundColor;
        float: right;
        span.triangle {
          background-color: $userBackgroundColor;
          border-bottom-width: 0;
          border-left-width: 0;
          right: -5px;
        }
      }
    }
  }
}
